define([
    'app'
], function (webChart) {
    webChart.directive("echart", function() {
        return {
            restrict:	 "EA",
            replace:	 true,
            transclude: true,
            template:	"<div class='echart'>" +
            "<echart-data></echart-data>" +
            "<echart-style></echart-style>" +
            "<echart-panel></echart-panel>" +
            "</div>",
            scope:		{
                name:	'@chartName'
            },
            controller: function ($scope) {
                $scope.$on("data-updated", function(e, data) {
                    $scope.$broadcast("draw-data", data);
                })
                $scope.$on("style-updated", function(e, style) {
                    $scope.$broadcast("draw-style", style)
                })

                // api
                $scope.getName = function () {
                    return $scope.name
                }
            },
            link:		function($scope, element, attrs) {
            }
        }
    });
})